<template>
	<view class="set_box">
		<input v-model="keyword" type="text" placeholder="输入您的昵称" :maxlength="8" placeholder-style="color: #BBBBBB" />
		<view>2-8个字符，仅支持中英文、数字</view>
		<view class="set_btn" @click="handleSave">保存昵称</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import api from '../../common/api';
import { useUserinfoStore } from '@/stores/userInfo';
const userInfo_Store = useUserinfoStore();
const keyword = ref('');
onLoad((options) => {
	keyword.value = options.key || '';
});
const handleSave = async () => {
	//用户名正则，2到8位（字母，数字）
	const uPattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,8}$/;
	if (!keyword.value) {
		uni.showToast({
			title: '输入您的昵称',
			icon: 'none'
		});
		return;
	} else if (!uPattern.test(keyword.value)) {
		uni.showToast({
			title: '仅支持2-8个中英文、数字',
			icon: 'none'
		});
		return;
	}
	const res = await api.UpdateNickname_API({ nickname: keyword.value });
	if (res) {
		uni.showToast({
			title: '修改成功',
			icon: 'none'
		});
		//获取用户信息
		await userInfo_Store.GetUserInfo();
		uni.navigateBack();
	}
};
</script>

<style lang="scss" scoped>
.set_box {
	border-top: 24rpx solid #f5f5f5;
	padding: 40rpx 24rpx 24rpx;
	color: #666;
	font-size: 24rpx;

	input {
		padding: 0 20rpx;
		color: #333;
		font-size: 26rpx;
		box-sizing: border-box;
		height: 88rpx;
		background: #f6f6f6;
		border-radius: 8rpx;
		border: 2rpx solid #eeeeee;
		margin-bottom: 10rpx;
	}

	.set_btn {
		position: fixed;
		bottom: 24rpx;
		left: 24rpx;
		width: calc(100% - 48rpx);
		height: 68rpx;
		background-color: #7f7fe9;
		color: #fff;
		text-align: center;
		line-height: 68rpx;
		border-radius: 16rpx;
	}
}
</style>
